<template>
  <div class="planissuance-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button :icon="Search" plain type="primary" @click="openQuery">
          查询
        </el-button>
        <el-button
          :disabled="!state.selectedData || state.selectedData.length == 0"
          :icon="CircleCheck"
          plain
          type="primary"
          @click="syncBom"
        >
          同步BOM
        </el-button>
        <el-button
          :disabled="!state.selectedData || state.selectedData.length == 0"
          :icon="Position"
          plain
          type="primary"
          @click="orderDown"
        >
          投产
        </el-button>
        <el-button
          :disabled="!state.selectedData || state.selectedData.length == 0"
          :icon="Guide"
          plain
          type="danger"
          @click="cancelDown"
        >
          取消投产
        </el-button>
        <el-button :icon="Collection" plain type="primary" @click="showBom">
          联查BOM
        </el-button>
        <el-button :icon="Collection" plain type="primary" @click="showRoute">
          联查工艺
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '6px 0px' }"
      :data="state.morders"
      highlight-current-row
      style="height: calc(100vh - 186px)"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        :selectable="selectable"
        type="selection"
        width="45"
      />
      <el-table-column label="生产订单" prop="scddh" width="150" />
      <el-table-column label="U8订单号" prop="moCode" width="150" />
      <el-table-column label="u8行号" prop="sortSeq" width="90" />
      <el-table-column label="投产" prop="isTc" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.isTc === false" color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
          <el-icon v-else color="#30DF80" size="20">
            <Select />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="编码名称" prop="invcode" width="280">
        <template #default="scope">
          <el-row>
            <span>{{ scope.row.invcode }}</span>
          </el-row>
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invname }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" prop="invspec" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invspec }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.invtype }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="部门名称" prop="deptName" width="150" />
      <el-table-column label="计划数量" prop="jhwgsl" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.jhwgsl }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="开完工日期" prop="invspec" width="250">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 700; color: #000">
            {{ scope.row.jhkgrq }}
            ~
            {{ scope.row.jhwgrq }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="创建信息" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.createUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.createTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="审核信息" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.shenheUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.shenheTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column v-if="false" label="pkInv" prop="pkInv" width="150" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <QueryDialogVue ref="queryDialogRef" @query-callback="queryCallback" />
  </div>
</template>

<script setup>
  import {
    Search,
    Position,
    Guide,
    Collection,
    CircleCheck,
    Select,
    SemiSelect,
  } from '@element-plus/icons-vue'
  import QueryDialogVue from './modules/queryDialog.vue'
  import { getMorderPageApi } from '@/api/mes/morder_api'
  import {
    orderListToDispatchApi,
    orderListDownCancelApi,
  } from '@/api/mes/dispatch_api'
  import { syncU8BomListApi } from '@/api/erp/index'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  const router = useRouter()

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const queryDialogRef = ref()
  const state = reactive({
    queryInfo: {
      isTc: false,
      pkCorp: pkCorp,
      state: 1,
      isTcSign: 'sign',
    },
    morders: [],
    currentRow: {},
    selectedData: [],
  })

  const openQuery = () => {
    queryDialogRef.value.openDialog()
  }

  const queryCallback = (query) => {
    state.queryInfo = query
    state.queryInfo.pkCorp = pkCorp
    state.queryInfo.state = 1
    state.queryInfo.ksDate = state.queryInfo.queryDate[0]
    state.queryInfo.jsDate = state.queryInfo.queryDate[1]
    getMorder()
  }

  const getMorder = async () => {
    state.queryInfo.pageNum = paginationParams.pageNum
    state.queryInfo.pageSize = paginationParams.pageSize
    const { code, data } = await getMorderPageApi(state.queryInfo)
    if (code === 2000) {
      state.morders = data.list
      paginationParams.total = data.total
    }
  }

  const handleCurrentChange = (row) => {
    state.currentRow = row
  }
  const handleSelectionChange = (vals) => {
    state.selectedData = vals
  }
  const orderDown = async () => {
    const sendData = state.selectedData.map((item) => {
      if (item.isTc == false) {
        return item
      }
    })
    if (sendData.length > 0) {
      const load = $baseLoading()
      try {
        const { code, msg } = await orderListToDispatchApi(sendData)
        if (code === 2000) {
          $baseMessage(msg, 'success')
          getMorder()
        }
      } finally {
        load.close()
      }
    } else {
      $baseMessage('请选择需要下达的数据！', 'warning')
    }
  }
  // const orderDown = async () => {
  //   if (state.currentRow.pkMorder) {
  //     const { code, msg } = await orderToDispatchApi(state.currentRow)
  //     if (code === 2000) {
  //       $baseMessage(msg, 'success')
  //       getMorder()
  //     }
  //   } else {
  //     $baseMessage('请选择需要下达的数据！', 'warning')
  //   }
  // }
  const cancelDown = async () => {
    const sendData = state.selectedData.map((item) => {
      if (item.isTc == true) {
        return item
      }
    })
    if (sendData.length > 0) {
      const load = $baseLoading()
      try {
        const { code, msg } = await orderListDownCancelApi(sendData)
        if (code === 2000) {
          $baseMessage(msg, 'success')
          getMorder()
        }
      } finally {
        load.close()
      }
    } else {
      $baseMessage('请选择需要取消的数据！', 'warning')
    }
  }
  // const cancelDown = async () => {
  //   if (state.currentRow.pkMorder) {
  //     const { code, msg } = await orderDownCancelApi(state.currentRow)
  //     if (code === 2000) {
  //       $baseMessage(msg, 'success')
  //       getMorder()
  //     }
  //   } else {
  //     $baseMessage('请选择需要取消的数据！', 'warning')
  //   }
  // }
  const showBom = () => {
    if (state.currentRow.pkInv && state.currentRow.invcode) {
      router.push({
        name: 'bom',
        query: {
          pkInv: state.currentRow.pkInv,
          invcode: state.currentRow.invcode,
        },
      })
    } else {
      alert('请选择需要查看的数据！')
    }
  }

  const showRoute = () => {
    if (state.currentRow.pkInv && state.currentRow.invcode) {
      router.push({
        name: 'processRoute',
        query: {
          pkInv: state.currentRow.pkInv,
          invcode: state.currentRow.invcode,
          tc: true,
        },
      })
    } else {
      alert('请选择需要查看的数据！')
    }
  }

  const syncBom = async () => {
    const sendData = state.selectedData.map((item) => {
      item.pkCorp = pkCorp
      return item
    })
    if (sendData.length > 0) {
      const load = $baseLoading()
      try {
        const res = await syncU8BomListApi(sendData)
        if (res.code === 2000) {
          $baseMessage(res.msg, 'success')
          u8Morders.value = res.data.list
          paginationParams.total = res.data.total
        } else {
          $baseMessage(res.msg, 'error')
        }
      } finally {
        load.close()
      }
    } else {
      $baseMessage('请选择需要同步的数据！', 'warning')
    }
  }

  // const syncBom = async () => {
  //   let params = {
  //     bomId: state.currentRow.bomid,
  //     pkCorp,
  //   }
  //   const load = $baseLoading()
  //   try {
  //     const res = await syncU8BomApi(params)
  //     if (res.code === 2000) {
  //       $baseMessage(res.msg, 'success')
  //       u8Morders.value = res.data.list
  //       paginationParams.total = res.data.total
  //     } else {
  //       $baseMessage(res.msg, 'error')
  //     }
  //   } finally {
  //     load.close()
  //   }
  // }

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  })

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
  }
  //#endregion

  watch(paginationParams, () => getMorder())

  onMounted(() => getMorder())
</script>
